Bootstrap 5 — Pagination

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add pagination buttons with Bootstrap 5.

Pagination

We can show pagination buttons to let users navigate to different pages if there’s a series of content spanning multiple pages.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item"><a class="page-link" href="#">2</a></li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item"><a class="page-link" href="#">Next</a></li>  
  </ul>  
</nav>

We have a nav element with a ul inside.

The li has the .page-item class to add borders to them.

Each pagination link has the .page-link class to style them.

Working with Icons

We can add icons to the a tags.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item">  
      <a class="page-link" href="#">  
        <span>&laquo;</span>  
      </a>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item"><a class="page-link" href="#">2</a></li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">  
        <span>&raquo;</span>  
      </a>  
    </li>  
  </ul>  
</nav>

We have the first and last pagination links with icons instead of regular text inside.

Disabled and Active States

We can set the states of the links to be disabled or active.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item disabled">  
      <a class="page-link" href="#" tabindex="-1">Previous</a>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active">  
      <a class="page-link" href="#">2</a>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

We disabled the Previous link with the disabled class.

And we set the 2 link to be active with the active class.

We can swap out active or disabled anchors for spans.

The anchor can be omitted in the previous or next arrows.

These all remove the click functionality and prevent keyboard focus while retaining the correct styles.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

We replace the anchor with the span in the Previous and 2 buttons.

Now we can’t click or focus on them.

Sizing

The size of the pagination bar can change with the pagination-lg or pagination-sm class.

For example, we can write:

<nav>  
  <ul class="pagination pagination-lg">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active" aria-current="page">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

to make it large, and:

<nav>  
  <ul class="pagination pagination-sm">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active" aria-current="page">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

to make it small.

Alignment

The alignment of the pagination bar can change.

For example, we can write:

<nav>  
  <ul class="pagination justify-content-center">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active" aria-current="page">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

to center the pagination bar.

Conclusion

We can add a pagination bar to display links that navigate to various pages.